<template>
  <div id="evaluate">
    <el-form ref="form" :model="form" label-width="80px" label-position="top">
      <span class="title">租房评价</span>
      <div class="house" :model="houseinfo" v-if="showHouse">
        <el-descriptions title="房源信息">
          <el-descriptions-item label="房东账号">{{
            masterinfo.userName
          }}</el-descriptions-item>
          <el-descriptions-item label="房源号">{{
            houseinfo.houseAccount
          }}</el-descriptions-item>
          <el-descriptions-item label="房源地址">{{
            houseinfo.houseSite
          }}</el-descriptions-item>
        </el-descriptions>
        <el-form-item label="房屋评价" prop="houseComment">
          <el-input type="textarea" v-model="houseComment"></el-input>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="primary" plain @click="onHouseSubmit()"
            >确定</el-button
          >
        </el-form-item>
      </div>
      <div class="master" :model="masterinfo" v-if="showMaster">
        <el-descriptions title="房东信息">
          <el-descriptions-item label="房东">{{
            masterinfo.nikeName
          }}</el-descriptions-item>
          <el-descriptions-item label="房东账号">{{
            masterinfo.userName
          }}</el-descriptions-item>
        </el-descriptions>
        <el-form-item label="房东评价" prop="masterComment">
          <el-input type="textarea" v-model="masterComment"></el-input>
        </el-form-item>
        <el-form-item class="btn">
          <el-button
            type="primary"
            plain
            @click="
              onUserSubmit(masterinfo.userName, masterComment),
                (showMaster = false)
            "
            >确定</el-button
          >
        </el-form-item>
      </div>
      <!-- 动态显示有无室友和室友个数（？） -->
      <div class="roomie">
        <div v-for="(item, index) in roomieinfo" :key="index">
          <div class="roomie1" v-if="item.showMate">
            <el-descriptions title="用户信息">
              <el-descriptions-item label="用户">{{
                item.nikeName
              }}</el-descriptions-item>
              <el-descriptions-item label="用户账号">{{
                item.userName
              }}</el-descriptions-item>
            </el-descriptions>
            <el-form-item label="室友评价" prop="mateComment">
              <el-input type="textarea" v-model="item.mateComment"></el-input>
            </el-form-item>
            <el-form-item class="btn">
              <el-button
                type="primary"
                plain
                @click="onUserSubmit(item.userName, item.mateComment, index)"
                >确定</el-button
              >
            </el-form-item>
          </div>
        </div>
      </div>
      <el-form-item class="upbtn">
        <el-button type="primary" @click="finish">结束评价</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
import request from "@/utils/request";
export default {
  name: "HelloWorld",
  data() {
    return {
      showHouse: true,
      showMaster: true,
      usercomment: [],
      houseId: "",
      //获取localStorage中保存的后台返回的用户信息
      user: localStorage.getItem("user")
        ? JSON.parse(localStorage.getItem("user"))
        : {},
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        content: "",
      },
      houseinfo: {},
      houseComment: "",
      masterinfo: {},
      masterComment: "",
      mateComment: "",
      roomieinfo: [],
      houseAccount: "",
      comment: {},
      mateIds: [],
    };
  },
  async created() {
    this.id = this.$route.query.id;
    this.houseAccount = this.$route.query.houseAccount;
    try {
      const [houseRes, mateRes] = await Promise.all([
        request.get("/house/account/" + this.houseAccount),
        request.get("/history/mate/" + this.id),
      ]);
      if (houseRes.code === 200) {
        this.houseinfo = houseRes.data;
        const masterRes = await request.get("/user/" + this.houseinfo.ownerId);
        if (masterRes.code === 200) {
          this.masterinfo = masterRes.data;
        } else {
          this.$notify.error(masterRes.msg);
        }
      } else {
        this.$notify.error(houseRes.msg);
      }
      if (mateRes.code === 200) {
        this.mateIds = mateRes.data;
        console.log(this.mateIds);
        for (let mateId of this.mateIds) {
          console.log(mateId);
          const roomieRes = await request.get("/user/" + mateId);
          if (roomieRes.code === 200) {
            console.log(roomieRes.data);
            this.roomieinfo.push(roomieRes.data);
          } else {
            this.$notify.error(roomieRes.msg);
          }
        }
        for (let i = 0; i < this.roomieinfo.length; i++) {
          this.$set(this.roomieinfo[i], "mateComment", "");
          this.$set(this.roomieinfo[i], "showMate", true);
        }
      } else {
        this.$notify.error(mateRes.msg);
      }
    } catch (error) {
      console.error(error);
    }
  },
  methods: {
    onHouseSubmit() {
      this.comment = {};
      this.$set(this.comment, "userAccount", this.user.userName);
      this.$set(this.comment, "houseAccount", this.houseAccount);
      this.$set(this.comment, "type", "HOUSE_COMMENT");
      this.$set(this.comment, "content", this.houseComment);
      request.post("/comment", this.comment).then((res) => {
        if (res.code === 200) {
          this.$notify.success("评论成功！");
          this.showHouse = false;
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
    onUserSubmit(targetAccount, content, index) {
      this.comment = {};
      this.$set(this.comment, "userAccount", this.user.userName);
      this.$set(this.comment, "houseAccount", this.houseAccount);
      this.$set(this.comment, "targetUserAccount", targetAccount);
      this.$set(this.comment, "type", "USER_COMMENT");
      this.$set(this.comment, "content", content);
      if (index != null) {
        this.roomieinfo[index].showMate = false;
      }
      request.post("/comment", this.comment).then((res) => {
        if (res.code === 200) {
          this.$notify.success("评论成功！");
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
    onSubmit() {
      console.log("submit!");
    },
    finish() {
      request.put("/history/comment/" + this.id).then((res) => {
        if (res.code === 200) {
          this.$router.push("/personal");
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
  },
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
form.el-form.el-form--label-top {
  margin-top: 100px;
  margin-left: 350px;
  width: 650px;
  border-radius: 8px;
  box-shadow: 5px 4px 14px #bebebe, -20px -20px 60px #ffffff;
  padding: 40px 100px 40px;
}
span.title {
  color: #333;
  font-size: 32px;
  font-weight: 700;
  font-family: "Microsoft YaHei";
  margin: 10px 261px;
}
.house {
  border-bottom: 1px dashed black;
  margin-top: 35px;
}
.master {
  border-bottom: 1px dashed black;
  margin-top: 30px;
}
.roomie {
  margin-top: 30px;
}
.roomie1 {
  border-bottom: 1px dashed #e6e6e6;
  margin-top: 30px;
}
.roomie2 {
  margin-top: 30px;
}
.upbtn {
  margin-left: 290px;
}
</style>